<template>
  <div class="xiaoguo">
    <Myhead>效果图</Myhead>
    <!-- 导航 -->
      <Mynav>
        <template v-slot:left>
          户型
        </template>
        <template v-slot:center>
          区域
        </template>
        <template v-slot:right>
          风格
        </template>
      </Mynav>
   <div class="con">
    <div class="list">
        <xiaoguoCard v-for="(item,i) in list" :key="i" :item="item" @click.native="$router.push('/XiaoguoDeatail')"></xiaoguoCard>
    </div>
   <Myfoot></Myfoot>
   </div>
  </div>
</template>

<script>
import Myhead from "@/components/Myhead";
import xiaoguoCard from '@/components/xiaoguoCard'
import Myfoot from '@/components/Myfoot'
import Mynav from '@/components/Mynav'
export default {
  data() {
    return {
        list:[]
    };
  },
  mounted() {
      this.$http.get('/home/xiaoguotu').then(res => {
          console.log(res.data.list);
        this.list = res.data.list
      })
  },
  methods: {},
  components: {
    Myhead,
    xiaoguoCard,
    Myfoot,
    Mynav
  },
};
</script>

<style lang='scss' scoped>
.xiaoguo {
    height: 100%;
    overflow: hidden;
}
.con {
    width: 100%;
    height: calc(100% - 120px);
    overflow: auto;
    background-color: #f4f4f4;
}

.list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
</style>
